@extends('admin.public.base')

@section('cssContent')
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
@endsection

@section('content')
<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 产品管理 <span class="c-gray en">&gt;</span> 产品分类 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			<button class="btn btn-success radius pos-a" style="right: 20px;" onclick="categoryAdd()">添加顶级分类</button>
			<table class="table">
				<tr>
					<td width="200" class="va-t"><ul id="treeDemo" class="ztree"></ul></td>
					<td class="va-t">
						<div class="pd-20">
						  <div class="form form-horizontal" id="form-user-add">
						    <div class="row cl">
						      <label class="form-label col-7" style="text-align: left;"><span class="c-red">*</span>栏目名称：</label>
						      <div class="formControls col-7">
						        <input type="text" class="input-text" value="" placeholder="" id="catName" name="product-category-name">
						      </div>
						      <div class="col-7"> </div>
						    </div>
						    <!-- <div class="row cl">
						      <label class="form-label col-7" style="text-align: left;">备注：</label>
						      <div class="formControls col-7">
						        <textarea name="" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,100)"></textarea>
						        <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
						      </div>
						      <div class="col-5"> </div>
						    </div> -->
						    <div class="row cl">
						      <div class="col-9 col-offset-1">
						        <input class="btn btn-primary radius" onclick="saveCat()" type="button" value="&nbsp;&nbsp;保存&nbsp;&nbsp;">
						        <input class="btn btn-danger radius ml-20" onclick="delCat()" type="button" value="&nbsp;&nbsp;删除&nbsp;&nbsp;">
						        <input class="btn btn-secondary radius ml-20" onclick="saveNextCat()" type="button" value="&nbsp;&nbsp;保存为下级栏目&nbsp;&nbsp;">
						      </div>
						    </div>
						  </div>
						</div>
					</td>
				</tr>
			</table>
		</article>
	</div>
</section>
@endsection

@section('jsContent')
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
// 保存栏目
function saveCat() {
	var name = $('#catName').val();
	var catid = $('#catName').attr('catid');
	if (!catid) {
		layer.msg('请选择栏目',{icon:2,time:800});
		return;
	}
	var url = '{{url("admin/category/save")}}';
	var index2 = layer.load(2,{shade: [0.8, '#393D49']});
	$.post(url,{'name':name,'catid':catid,'_token':'{{csrf_token()}}'},function (data) {
		layer.close(index2);
		if (data.status) {
			layer.msg('操作成功',{icon:1,time:800});
			setTimeout(function(){ 
				location.reload();
			 }, 800);
		}else{
			layer.msg(data.msg,{icon:2,time:800});
		}
	},'json');
}

// 保存为下级栏目
function saveNextCat() {
	var name = $('#catName').val();
	var pid = $('#catName').attr('catid');
	if (!pid) {
		layer.msg('请选择栏目',{icon:2,time:800});
		return;
	}
	var url = '{{url("admin/category/save")}}';
	var index2 = layer.load(2,{shade: [0.8, '#393D49']});
	$.post(url,{'name':name,'pid':pid,'_token':'{{csrf_token()}}'},function (data) {
		layer.close(index2);
		if (data.status) {
			layer.msg('操作成功',{icon:1,time:800});
			setTimeout(function(){ 
				location.reload();
			 }, 800);
		}else{
			layer.msg(data.msg,{icon:2,time:800});
		}
	},'json');
}

// 删除栏目
function delCat() {
	var catid = $('#catName').attr('catid');
	if (!catid) {
		layer.msg('请选择栏目',{icon:2,time:800});
		return;
	}
	
	var index = layer.confirm('删除栏目同时会删除下级栏目，确定删除？', {
		btn: ['确定','取消'], //按钮
		title:'提示',
	}, function(){
		var url = '{{url("admin/category/del")}}' + '/' + catid;
		var index2 = layer.load(2,{shade: [0.8, '#393D49']});
		$.get(url,{},function (data) {
			layer.close(index2);
			if (data.status) {
				layer.msg('操作成功',{icon:1,time:800});
				setTimeout(function(){ 
					location.reload();
				 }, 800);
			}else{
				layer.msg(data.msg,{icon:2,time:800});
			}
		},'json');
	}, function(){
		// layer.close(index);
	});
}

// 添加顶级栏目
function categoryAdd() {
	//页面层-自定义
	layer.open({
		type: 1,
		title: '添加顶级栏目',
		closeBtn: 0,
		shadeClose: true,
		content: '<div class="cl pd-20" style="margin-top:50px;"><label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>栏目名称:</label><div class="formControls col-xs-7 col-sm-8"><input type="text" class="input-text" value="" placeholder="" id="cat-name" name=""></div></div>',
		btn: ['确定', '取消'],
		area: ['600px', '400px'],
		yes: function(index, layero){
			var name = $('#cat-name').val();
			var url = '{{url("admin/category/save")}}';
			var index = index;
			var index2 = layer.load(2,{shade: [0.8, '#393D49']});
			$.post(url,{'name':name,'_token':'{{csrf_token()}}'},function (data) {
				layer.close(index2);
				if (data.status) {
					layer.close(index);
					layer.msg('操作成功',{icon:1,time:800});
					setTimeout(function(){ 
						location.reload();
					 }, 800);
				}else{
					layer.msg(data.msg,{icon:2,time:800});
				}
			},'json');
		},
		btn2: function(index, layero){
			layer.close(index);
		}
	});
}
var setting = {
	view: {
		dblClickExpand: false,
		showLine: false,
		selectedMulti: false
	},
	data: {
		simpleData: {
			enable:true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: ""
		}
	},
	edit:{
		drag:{
			isCopy:true,
			isMove:true,
			prev:true,
			inner:true,
			next:true,
			maxShowNodeNum:1
		},
		enable:true,
		showRemoveBtn:false,
		showRenameBtn:false
	},
	callback: {
		beforeClick: function(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			$('#catName').val(treeNode.name);
			$('#catName').attr('catid',treeNode.id);
		},
		onDrop:function (event,treeId,treeNodes,targetNode) {
			var catid = treeNodes[0].id;
			var name = treeNodes[0].name;
			console.log(treeNodes[0]);
			var pid;
			if (treeNodes[0].getParentNode()) {
				pid = treeNodes[0].getParentNode().id;
			}else{
				pid = 0;
			}
			var url = '{{url("admin/category/save")}}';
			var index2 = layer.load(2,{shade: [0.8, '#393D49']});
			$.post(url,{'name':name,'pid':pid,'catid':catid,'_token':'{{csrf_token()}}'},function (data) {
				layer.close(index2);
				if (data.status) {
					layer.msg('操作成功',{icon:1,time:800});
					// setTimeout(function(){ 
					// 	location.reload();
					//  }, 800);
				}else{
					layer.msg(data.msg,{icon:2,time:800});
				}
			},'json');
			
		}
	}
};

var zNodes ={!!$catList!!};

var code;

function showCode(str) {
	if (!code) code = $("#code");
	code.empty();
	code.append("<li>"+str+"</li>");
}

$(document).ready(function(){
	var t = $("#treeDemo");
	
	if (zNodes.length >= 1) {
		zTree = $.fn.zTree.init(t, setting, zNodes);
		zTree.expandAll(true);  // 默认开启全部节点
	}else{
		t.val('暂无栏目');
	}
	
});
</script>
@endsection